<template>
  <t-link v-permission="['system:engineering:query']" theme="primary" @click="handleViewEngineering"> {{ props.btnText }} </t-link>
  <t-dialog
    v-model:visible="visible"
    attach="body"
    :confirm-btn="null"
    destroy-on-close
    header="查看"
    mode="full-screen"
  >
    <div class="view-engineering-scroll">
      <engineering-details :id="props.id" />
    </div>
  </t-dialog>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue';
import { useRouter } from 'vue-router';

import disposableParams from '@/utils/disposableParams';

import EngineeringDetails from './EngineeringDetails.vue';

// router
const router = useRouter();
// props
const props = defineProps({
  // 施工id
  id: {
    type: Number,
    required: true,
  },
  // 模式
  mode: {
    type: String as PropType<'page' | 'dialog'>,
    default: 'page',
  },
  // 按钮文字
  btnText: {
    type: String,
    default: '查看',
  },
  // 操作类型
  operateType: {
    type: String,
  },
  // 审批类型
  approveType: {
    type: String,
  },
});
// 显示
const visible = ref(false);
// 处理查看
const handleViewEngineering = () => {
  disposableParams.set(`engineering-details-jump-params-${props.id}`, {
    operateType: props.operateType ,
    approveType: props.approveType,
  });
  if (props.mode === 'page') {
    router.push({
      name: 'EngineeringDetails',
      params: {
        id: props.id,
      },
      query: { timeStamp: new Date().getTime() },
    });
  } else if (props.mode === 'dialog') {
    visible.value = true;
  }
};
</script>

<style lang="less" scoped>
.view-engineering-scroll {
  width: 100%;
  height: calc(100vh - 170px);
  padding-right: 6px;
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
    background-color: var(--td-scrollbar-color);
  }
}
</style>
